<template>
  <div class="searchapp">
    <!-- 标题栏 -->
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <!--搜索框 -->
    <div class="commodity">
      <div class="comm">
        <van-icon name="search" class="iconsearch" />
        <input
          type="text"
          v-model="searchVal"
          placeholder="商品搜索"
          @input="iptEvents"
        />
      </div>
      <p @click="cancelSearch">取消</p>
    </div>
    <!-- 热门搜索 -->
    <div class="hotSeaech" v-if="isShow == 'hot'">
      <div class="hotSeaech-t" v-show="hotSeaechsss">
        <div class="hotSeaech-t-t">
          <p>历史记录</p>
          <van-icon name="delete" class="Sinco"  @click="clearhistory"/>
        </div>
        <div @click="InfoList($event)" class="hotSeaech-item" v-for="(item, index) in historyData" :key="index">
          {{ item.keyword }}
        </div>
      </div>
      <div class="hotSeaech-b">
        <p>热门搜索</p>
        <div @click="InfoList($event)" class="hotSeaech-item" v-for="(item, index) in SearchList" :key="index">
          {{ item.keyword }}
        </div>
      </div>
    </div>
    <!-- 搜索内容 -->
    <div class="contentSearch" v-if="isShow == ''">
      <div @click="InfoList($event)" class="contentSearch-item" v-for="item in keywords" :key="item.id">
        {{item.name}}
      </div>
        <!-- <div>数据库暂无此类商品....</div> -->
    </div>
    <!-- 商品列表 -->
    <div class="listSearch" v-if="isShow=='list'">
      <div class="listSearch-arow">
        <div>综合</div>
      <div>
        <span>价格</span>
        <van-icon name="arrow-up" />
        <van-icon name="arrow-down" />
      </div>
      <div>分类</div>
      </div>
      <div class="listSearch-item">
        <div class="item" v-for="item in keywords" :key="item.id">
          <img :src="item.list_pic_url" alt="">
          <div class="content-item-t">
            {{item.name}}
          </div>
          <div class="content-item-b">
            ￥{{item.retail_price}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { search,helperaction,addhistoryaction,clearhistoryAction } from "@/api/home/Search.js";
export default {
  data() {
    return {
      //热门搜索
      SearchList: [],
      //历史记录
      historyData: [],
      //商品列表
      // Searchitem:[],
      //搜索内容
      keywords:[],
      //商品搜索
      searchVal: "",
      //切换框
      isShow: "hot",
      //搜索提示接口参数 地毯....
      keyword:'',
      //asc/desc  排序 价格排序
      order:'',
      hotSeaechsss:false,
    };
  },
  methods: {
    //返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
    //搜索框
    Searchinput() {

    },
    //取消
    cancelSearch() {
      //清空input 输入框 返回上一个页面
      this.$router.go(-1);
    },
    //input框发生改变时触发
    iptEvents() {
      // console.log('搜索框改变了');
      if (this.searchVal.length > 0) {
        this.isShow = "";
      } else {
        this.isShow = "hot";
      }
    },
    getSearchList() {
      //关键词和搜索历史接口
      search({
        openId: localStorage.getItem("openId"),
      }).then((res) => {
        console.log(res);
        if(res.historyData.length>0){
          this.hotSeaechsss=true;
        }else{
          this.hotSeaechsss=false;
        }
        this.SearchList = res.hotKeywordList;
        this.historyData = res.historyData;
        // console.log(this.historyData)
      });
      //搜索列表
     helperaction({
          keyword:this.keyword,
          order:this.order
      }).then(res=>{
          console.log(res)
          this.keywords=res.keywords;
      });
      //搜索关键词添加到数据库
      addhistoryaction({
        keyword:this.keyword,
        openId:localStorage.getItem('openId')
      }).then(res=>{
        // console.log(res)
      });
     
    },
    InfoList(e){
        // console.log(e.target.innerHTML);
        this.keyword=e.target.innerHTML;
        // console.log(this.keyword)
        this.isShow='list';
        this.getSearchList();
    },
    //点击清空历史记录
    clearhistory(){
        //清空搜索历史
      clearhistoryAction({
        openId:localStorage.getItem('openId')
      }).then(res=>{
        console.log(res)
      })
      this.hotSeaechsss=false;
    }
  },
  created() {
    this.getSearchList();
  },
  watch:{
      searchVal(){
        // console.log(this.searchVal)
        this.keyword=this.searchVal;
        this.getSearchList();
      }

  }
};
</script>
<style lang="scss" scoped>
.searchapp {
  width: 100%;
  height: 600px;
  background-color: #f4f4f4;
  .commodity {
    margin-top: 48px;
    //   width: 100%;
    padding: 10px 10px;
    //   background-color: #8962f5;
    position: relative;
    .comm {
      width: 90%;
      background-color: #f7f8fa;
      .iconsearch {
        font-size: 20px;
        margin-right: 5px;
      }
      input {
        width: 80%;
        line-height: 25px;
        background-color: #f7f8fa;
      }
    }
    p {
      position: absolute;
      top: 0px;
      right: 10px;
      font-size: 14px;
    }
  }
  .contentSearch {
    width: 100%;
    // background-color: rgb(34, 214, 64);
    .contentSearch-item {
      width: 90%;
      margin: 4px auto;
    //   background-color: #806bf1;
    }
  }
  .hotSeaech {
    width: 100%;
    .hotSeaech-t {
    //    width:%;
      margin: 10px auto;
      padding:10px 15px;
      background-color: #fff;
      overflow: hidden;
      .hotSeaech-t-t {
        width: 95%;
        height: 50px;
        p {
          float: left;
        }
        .Sinco {
          float: right;
          margin-top: 14px;
          font-size: 18px;
        }
      }
      .hotSeaech-item {
        float: left;
        margin-right: 5px;
        border: 2px solid #ccc8c8;
        padding: 4px 2px;
        background-color: #fff;
      }
    }
    .hotSeaech-b {
    //   width:100%;
      margin: 10px auto;
      padding:10px 15px;
      background-color: #fff;
      overflow: hidden;
       p {
          float: left;
          width: 80%;
          background-color: #fff;
        }
       .hotSeaech-item {
        float: left;
        margin-right:10px;
        margin-bottom: 5px;
        border: 2px solid #ccc8c8;
        padding: 5px 4px;
        background-color: #fff;
      } 
      .hotSeaech-item:first-child{
        //   这里的颜色没有发生改变
          border: 2px solid #f81c1c;
      }      
    }  
  }
  .listSearch{   
    .listSearch-arow{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #fff;
    height: 50px;
    }
    .listSearch-item{
        margin-top: 10px;
        width: 100%;
        height:400px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .item{
            background-color: #fff;
            width:49%;
            height: auto;
            margin-bottom: 5px;
            img{
                width: 90%;
                height: auto;
            }
            .content-item-t{
                margin: 10px 0;
                text-align: center;
                padding: 0 15px;
            }
            .content-item-b{
                width: 100%;
                text-align: center;
            }
        }
    }
  }


}
</style>